<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>9</li>
			<li>8</li>
			<li>7</li>
			<li>6</li>
			<li>5</li>
			<li>4</li>
			<li>3</li>
			<li>2</li>
			<li>1</li>
		</ul>
	</body>
	<script type="text/javascript">
	/**
	 * 事件委托的核心：给父节点添加侦听器，利用事件冒泡影响每一个子节点
	 * addEventListener("name", function(){}, true/false) 
	 * 第三个参数为false或者省略是冒泡阶段
	 * 第三个参数为true是捕获阶段
	 * */
		var ul = document.querySelector("ul");
		ul.addEventListener("click",function(e){
			// console.log(e);
			console.log("我是li冒泡到ul的事件");
		})
	</script>
	<style type="text/css">
	ul{
		background-color: yellow;
		padding: 20px;
	}
		li{
			display: inline-block;
			padding: 10px;
			background-color: red;
		}
	</style>
</html>
